.block-reviews {
    padding-top: 2vw;

    &__tabs {
        width: 77.45vw;
    }

    &__dialog {
        text-align: center;
    }

    &__dialog::backdrop {
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(10px);
        cursor: pointer;
    }
}

.dialog_redirect {
    border: none;
    padding: 0;
}

.dialog__wrapper {
padding: 1em;
}


.tabs {
    padding-top: 4vw;
    padding-bottom: 20vw;

    &__nav {
        display: flex;
        justify-content: start;
        align-items: end;
        gap: 2px;
    }

    &__title {
        cursor: pointer;
        padding: 1vw 2vw;
        border-radius: 10px 10px 0 0;
        transition: background-color 0.6s;
    }

    &__title:hover {
        background-color: gray;
        color: white;
        // border-bottom: 4px solid currentColor;

        transition: background-color 0.3s, color 0.1s;
    }

    &__title._active {
        color: purple;
        background-color: white;
    }

    &__content {
        background-color: white;
        padding: 1vw 0;
        border-radius: 20px 20px 30px;

        width: 80vw;

        display: flex;
        justify-content: center;

        @media #{$tablet} {
            padding-bottom: 5vw;
        }
        
        @media #{$mobile} {
            padding-bottom: 6vw;
        }
    }

    &__content._tab-1-active {
        border-top-left-radius: 0;
    }

    &__item:not(._active) {
        display: none;
    }

    &__item {
        width: 70vw;
    }
}

.reviews-container {
    display: flex;
    flex-direction: row-reverse;
    // flex-direction: row;

    justify-content: start;
    gap: 0.5vw;

    @media #{$tablet} {
        flex-direction: column;
        font-size: 2vw;

    }
    @media #{$mobile} {
        flex-direction: column;
        font-size: 2.5vw;
    }

    &__total-wrapper {
        margin: 1vw 3vw 0 2vw;
    }

    &__posts-wrapper {
        margin: 2vw 2.5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        gap: 1.5vw;
        width: 70%;

        @media #{$tablet} {
            margin: 0;
            width: 100%;
            gap: 2vw;
        }

        @media #{$mobile} {
            margin: 0;
            width: 100%;
            gap: 3vw;
        }
    }
}

.total-wrapper__total {
    position: sticky;
    top: 3vw;
}

// .total {
//     &__negative {
//         color:#B83D3D;
//     }
//     &__positive {
//         color:#319331;
//     }
//     &__neutral {
//         color:#bebebe;
//     }
// }

// .posts-wrapper {
//     padding: 1vw 2vw;
// }

.count-number {
    color:#800080;

    &_type_negative {
        color:#B83D3D;
    }
    &_type_positive {
        color:#319331;
    }
    &_type_neutral {
        color:#bebebe;
    }
}


.review-post {
    padding: 1vw 2vw;
    // background-color: #fff;
    background-color: purple;
    border-top-left-radius: 20px;
    border-top-right-radius: 5vw;

    &_type_negative {
        position: relative;
        z-index: 0;
    }

    &_type_negative::before {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 6px solid #B83D3D;
        z-index: -1;
    }

    &_type_positive {
        position: relative;
        z-index: 0;
    }

    &_type_positive::before {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 6px solid #319331;
        z-index: -1;
    }

    &_type_neutral {
        position: relative;
        z-index: 0;
    }

    &_type_neutral::before {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 6px solid #bebebe;
        z-index: -1;
    }

    &__title {
        margin: 1vw 1vw;
    }

    &__body {
        text-align: justify;
        padding-bottom: 1.5vw;

        @media #{$mobile} {
            text-align: left;
        }
    }

    &__remaining-text._visible {
        display: inline;
    }

    &__remaining-text._hidden {
        display: none;
    }

    &__expand-button {
        cursor: pointer;
        background-color: #ffffff00;
        border: none;
        color: white;
    }

    &__usefulness {
        padding-bottom: 1vw;

        @media #{$tablet} {
            padding-bottom: 1.5vw;
        }

        @media #{$mobile} {
            padding-bottom: 2vw;
        }
    }
}

.review-post_no-reviews {
    background-color: #ffffff00;
    color: purple;
}

.usefulness {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 0.5vw;

    &__positive {
        background-color: green;
        border-radius: 5px 5px 0 0;
        padding: 5px 5px 0 5px;
        position: relative;
        z-index: 0;
    }
    &__positive::before {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 6px solid #319331;
        z-index: -1;
    }

    &__negative {
        background-color: #B83D3D;
        border-radius: 5px 5px 0 0;
        padding: 5px 5px 0 5px;
        position: relative;
        z-index: 0;
    }

    &__negative::before {
        content: "";
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-bottom: 6px solid orangered;
        z-index: -1;
    }
}

.comments-container {
    padding: 1vw 2vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 1.5vw;

    @media #{$tablet} {
        padding: 2vw 0;
    }
    @media #{$mobile} {
        padding: 3vw 0;
        gap: 2vw;
    }

    &__comment-post {
        width: 75%;
        @media #{$tablet} {
            width: 100%;
        }
        @media #{$mobile} {
            width: 100%
        }
    }
}

.comment-post {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;

    padding: 1vw 2vw;

    background-color: violet;
    border-radius: 20px;

    &__title {
        margin: 1vw 0.5vw 0;
        color: purple;
    }

    &__text {
        margin: 1vw 0.5vw;
        color: white;
        text-align: justify;

        @media #{$mobile} {
            text-align: left;
        }
    }

    &__remaining-text._visible {
        display: inline;
    }

    &__remaining-text._hidden {
        display: none;
    }

    &__expand-button {
        cursor: pointer;
        background-color: #ffffff00;
        border: none;
    }

    &__author {
        margin: 0 0.5vw;
    }

    &__date {
        align-self: end;
    }

    &__add-btn {
        cursor: pointer;
        background-color: #ffffff00;
        border: none;
        color: purple;
        padding: 3px 5px;
        margin: 1vw 0.5vw 0;
    }
}

.сomment-post_no-comments {
    background-color: #ffffff00;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4vw;
}

.review-form {
    &__container {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        gap: 1vw;
        padding: 1vw 3vw 4vw;
    }

    &__title {
        color: $background-color;
        font-family: $font-titles;
    }

    &__text {
        color: $background-color;
        font-family: $font-texts;
    }

    &__btn {
        width: 100%;
    }

    &__btn-text {
        cursor: pointer;
        font-family: $font-btns;
        color: $color;
        border: 2px solid $btnBackGround;
        background-color: $btnBackGround;
        border-radius: 5px;
        width: 100%;
        &:hover {
            background-color: $btnBackGroundHover;
            box-shadow: 5px 5px 5px $color;
        }
    }
}

.comment-form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 0.8vw;

    width: 40vw;

    @media #{$tablet} {
        width: 70vw;
        font-size: 2vw;

    }
    @media #{$mobile} {
        width: 70vw;
        font-size: 2.5vw;
    }

    &__content-title, &__content-text {
        width: 100%;
    }
    &__title-input, &__text-input {
        border: 3px solid #990094;
        border-radius: 10px;
        width: 100%;
        padding: 10px;
        font-family: $font-texts;

        @media #{$tablet} {
            font-size: 2vw;
    
        }
        @media #{$mobile} {
            font-size: 2.5vw;
        }
    }
}